<template>
  <a-spin :spinning="loading">
    <a-modal
      v-model="visible"
      title="编辑菜单"
      @cancel="handleClose"
      @ok="submitForm"
    >
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        v-bind="layout"
      >
        <a-form-model-item has-feedback label="菜单名称" prop="name">
          <a-input v-model="ruleForm.name" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="父菜单id" prop="higher">
          <a-input v-model.number="ruleForm.higher" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="图标" prop="icon">
          <a-input v-model="ruleForm.icon" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="菜单路径" prop="path">
          <a-input v-model="ruleForm.path" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-spin>
</template>
<script>
import { addNewMenu } from "@/apis/manage";
export default {
  props: {
    modelVisible: {
      type: Boolean,
      default: false,
    },
    ruleForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        higher: [
          { required: true, message: "请输入父菜单id", trigger: "blur" },
        ],
        path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      loading: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.modelVisible;
      },
      set(value) {
        return value;
      },
    },
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submit() {
      this.loading = true;
      const res = await addNewMenu(this.ruleForm);
      this.loading = false;
      if (res.status === 200) {
        this.$message.success("新增成功");
        this.$emit("updateList");
        this.handleClose();
        return;
      }
      this.$message.error("新增失败");
    },
    handleClose() {
      this.$emit("updateModelVisible", false);
      // this.$emit('update:modelVisible', false);
    },
  },
};
</script>
